
<#include "/base/common/head.html"/>

 <div class="easyui-panel addPage multiple" data-options="fit:true,border:false">
    <form class="easyui-form" id="form1" method="post" data-options="novalidate:true">
        <table class="table1">
        
            <tr>
           		<th><span>编号</span></th>
               	<td>
               		<div class="wrap_input"><input class="easyui-textbox" addClear type="text" name="code" id="code" value="" tabindex="1"
               			data-options="required:true,fit: true"></input></div>
           		</td>
           		<th><span>实数1</span></th>
               	<td>
               		<div class="wrap_input"><input class="easyui-numberbox" addClear type="text" name="doubleNum1" id="doubleNum1" value=""  tabindex="9"
               			data-options="fit: true,precision:1"></input></div>
           		</td>
               	<td style="width:10px"></td>
            </tr>
        
            <tr>
           		<th><span>名称</span></th>
               	<td>
               		<div class="wrap_input"><input class="easyui-textbox" addClear type="text" name="name" id="name" value="" tabindex="2"
               			data-options="required:true,fit: true"></input></div>
           		</td>
           		<th><span>实数2</span></th>
               	<td>
               		<div class="wrap_input"><input class="easyui-numberbox" addClear type="text" name="doubleNum2" id="doubleNum2" value="" tabindex="10"
               			data-options="fit: true,precision:1"></input></div>
           		</td>
            </tr>
            
            <tr>
           		<th><span>城市 (枚举URL)</span></th>
               	<td>
               		<div class="wrap_input"><input class="easyui-combobox" addClear type="text" name="city" id="city" value="" tabindex="3"
               			data-options="fit: true,valueField:'name',textField:'name',url:'${basePath}/base/basis/enumDetail/findByKey?key=demo_city'"></input></div>
           		</td>
           		<th><span>布尔1</span></th>
               	<td>
               		<div class="wrap_input"><input class="easyui-combobox" type="text" name="boolean1" id="boolean1" value="1" tabindex="11"
               			data-options="required:true,fit: true,editable:false,valueField:'value',textField:'text',data: [{text: '否',value: '0'},{text: '是',value: '1'}]"></input></div>
           		</td>
            </tr>
        
            <tr>
				<th><span>茶品 (序列)</span></th>
				<td>
		        	<div class="wrap_input"><input class="easyui-combobox" addClear type="text" name="tea" id="tea" value="" tabindex="4" 
		            	data-options="fit:true,valueField:'name',textField:'name',data: [{name: '普洱'},{name: '大红袍'},{name: '白牡丹'},{name: '如莲'}]"></input></div>
		        </td>
           		<th><span>布尔2</span></th>
               	<td style="text-align:left">
               		<div class="wrap_input">
               			<input class="easyui-switchbutton" name="boolean2" id="boolean2"  data-options="onText:'开',offText:'关'" checked />
               		</div>
           		</td>
            </tr>
        
            <tr>
		        <th><span>One分类 (分类URL)</span></th>
		        <td>
		        	<div class="wrap_input">
			            <input class="easyui-combobox" addClear type="text" name="oneSort.id" id="oneSort.id" value="" tabindex="7"
			               	data-options="fit:true,editable:false,valueField:'id',textField:'name',
			               			url:'${basePath}/base/basis/sort/findAll?key=oneSort'
			               			,onLoadSuccess:function(){
			               					//取默认值
			               					var dataArr = $('#fullSort\\.id').combobox('getData');
			               					for(var i=0;i<dataArr.length;i++)
			               					{
			               						var obj = dataArr[i];
			               						if(obj.code == '02')
			               						{
			               							$('#fullSort\\.id').combobox('setValue',obj.id);
			               							break;
			               						}
			               					}
			               			}
			               	"></input>
		             </div>
		        </td>
           		<th><span>日期1</span></th>
               	<td>
               		<div class="wrap_input"><input class="easyui-datetimespinner" type="text" name="theDate1" id="theDate1" value="0"  tabindex="12"
               			data-options="formatter:formatter_ymd,parser:parser_ymd,required:true,fit: true,showSeconds:false"></input></div>
           		</td>
            </tr>
            
         	<tr>
           		<th><span>爱好 (序列，多选)</span></th>
               	<td>
               		<div class="wrap_input"><input class="easyui-combobox" addClear type="text" name="hobby" id="hobby" value="" tabindex="6"
               			data-options="fit: true,editable:false,multiple:true,valueField:'name',textField:'name',data: [{name: '发呆'},{name: '阅读'},{name: '静思'},{name: '运动'}]"></input></div>
           		</td>
           		<th><span>日期2</span></th>
               	<td>
               		<div class="wrap_input"><input class="easyui-datebox" addClear type="text" name="theDate2" id="theDate2" value="" tabindex="13"
               			data-options="fit: true,editable:false, validType:'theDateValidator'"></input></div>
           		</td>
            </tr>
            
            <tr>
           		<th><span>整数1</span></th>
               	<td>
               		<div class="wrap_input"><input class="easyui-numberspinner" type="text" name="intNum1" id="intNum1" value="20" tabindex="7"
               			data-options="fit: true,min:10,max:100,editable:false"></input></div>
           		</td>
           		<th><span>时间1</span></th>
               	<td>
               		<div class="wrap_input"><input class="easyui-datetimespinner" type="text" name="theTime1" id="theTime1" value="123 09:00"  tabindex="14"
               			data-options="required:true,fit: true,showSeconds:false"></input></div>
           		</td>
            </tr>
            
            <tr>
           		<th><span>整数2</span></th>
               	<td>
               		<div class="wrap_input"><input class="easyui-numberbox" addClear type="text" name="intNum2" id="intNum2" value="" tabindex="8"
               			data-options="fit: true, validType:'intNumValidator' "></input></div>
           		</td>
           		<th><span>时间2</span></th>
               	<td>
               		<div class="wrap_input"><input class="easyui-datetimebox" addClear type="text" name="theTime2" id="theTime2" value="123 10:00"  tabindex="15"
               			data-options="fit: true,showSeconds:false,editable:false"></input></div>
           		</td>
            </tr>
            
        	<tr>
           		<th><span>备注</span></th>
               	<td colspan="3">
               		<input class="easyui-textbox" addClear type="text" name="remark" id="remark" value="" tabindex="16" data-options="multiline:true,height:60,width:'90%'" ></input>
           		</td>
            </tr>
            
        	<tr>
           		<th><span>说明</span></th>
               	<td colspan="3">
               		<div class="theTxtClass theRedTxt">
               		本示例中的一些隐藏演示功能：
               		</div>
               		<div class="theTxtClass ">
               		（1）城市、茶品：可输可选。
					（2）爱好：多选。
					（3）整数2：自定义验证，必须大于整数1。<br/>
					（4）日期2：自定义验证，必须大于日期1。
               		</div>
           		</td>
            </tr>
           
        </table>
    </form>
</div>

<style type="text/css">

/* 文本显示样式 */
.theTxtClass{font-family: Arial, Helvetica, sans-serif; line-height: 22px; color: #2f8ec7;margin-left:10px;font-size:12px;}

/* 红色文本样式 */
.theRedTxt{color: #ff0000;font-size:14px;}

</style>

<script>

//定义保存回调方法
top.window.subPage.save = save;
function save() {
	if($("#form1").form('validate')) {
		$.post("add", getParam(), function(data) {
			if("01" == data.code){//成功
				top.window.closeWindow(); //关闭窗口
				top.window.subPage.loadCurrDatagrid(); //回调方法
				showMsg(data.msg); //显示消息
				
			}else if("04" == data.code){//失败
				showErrorMsg(data.msg); //显示错误消息
			}
			
		});
		
	}
}

//获取表单数据
function getParam() {
	var param = {
			"obj.code": getInputValue("code"), 
			"obj.name": getInputValue("name"), 
			"obj.city": getInputValue("city"), 
			"obj.hobby": getInputValue("hobby"), 
			"obj.tea": getInputValue("tea"), 
			"obj.remark": getInputValue("remark"), 
			"obj.intNum1": getInputValue("intNum1"), 
			"obj.intNum2": getInputValue("intNum2"), 
			"obj.doubleNum1": getInputValue("doubleNum1"), 
			"obj.doubleNum2": getInputValue("doubleNum2"), 
			"obj.boolean1": getInputValue("boolean1"), 
			"obj.boolean2": $("#boolean2").switchbutton("options").checked+"",
			"obj.oneSort.id": getInputValue("oneSort.id"),  
			"obj.theDate1": getInputValue("theDate1"), 
			"obj.theDate2": getInputValue("theDate2"), 
			"obj.theTime1": getInputValue("theTime1"), 
			"obj.theTime2": getInputValue("theTime2")
	}
	//去除空数据
	for(key in param) {
		if(!param[key]) {
			delete param[key];
		}
	}
	return param;
}

$(function(){
/*
	为 EasyUI常用组件添加'清除'按钮及功能，共计6类，具体实现在common.js中定义，用法如下：
	（1）addClear4TextBox("#name",nameChangeDo);		//文本框,同时传入了回调函数
	（2）addClear4Combobox("#state\\.id");			//下拉列表框
	（3）addClear4Combogrid("#type\\.id");			//数据表格下拉框
	（4）addClear4Numberbox("#intNum2");				//数值输入框
	（5）addClear4Datebox("#theDate2");				//日期选择框
	（6）addClear4Datetimebox("#theTime2");			//日期选择框
	注：实现使用了 onChange 事件，如果需要使用该事件执行某些操作，可传入自定义函数，会自动回调 。
	加注：可使用autoAddClear()函数，为各组件自动填加‘清除’功能（组件需要增加 addClear属性 ）。
*/
	autoAddClear(); //为各组件自动填加‘清除’功能（组件需要增加 addClear属性 ）
	addClear4TextBox("#name",nameChangeDo); //对于需要使用OnChange事件的组件，单独手动填加
	
	$('#code').next('span').find('input').focus();  //第一个元素设置焦点
	
	addChangeFocusOpe(); //页面增加焦点切换操作
	
});

//名称改变时执行的一些操作。（演示清除操作回调）
var nameChangeDo = function(){
	//alert("改变了...");
}

//字符串转日期
function stringToDate(value){
    return new Date(Date.parse(value.replace(/-/g, "/")));
}

//自定义校验
$.extend($.fn.validatebox.defaults.rules, { 
	//注意：自定义验证器名称，一定不能包含数字，否则会不起作用
	
	intNumValidator:{//验证整数2（必须大小整数1）
        validator: function(value){
            return parseInt(value) > parseInt($("#intNum1").val());    
        },    
        message: '必须大于 整数1'   
    },   

    theDateValidator:{//验证日期2（必须大小日期1）
	    validator: function(value){
	        return stringToDate(value) > stringToDate($("#theDate1").val());    
	    },    
	    message: '必须大于 日期1'   
	}
    
});  

</script>
<#include "/base/common/foot.html"/>
